<template>
  <div class="article-page">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed>
      <template #title>
        <div class="nav-author" v-show="isShowName">
          <van-image round width="7vw" height="7vw" :src="list.aut_photo" />
          <span class="name">{{ list.aut_name }}</span>
          <span class="line">|</span>
          <span class="follow" :class="{ un: list.is_followed }"  @click="followAuthor()">{{ list.is_followed?'取消关注':'关注' }}</span>
        </div>
      </template>
      <template #right>
        <van-icon name="ellipsis" size="5.4vw"></van-icon>
      </template>
    </van-nav-bar>
    <div v-if="isLoading" class="article-skeleton"> <van-skeleton title :row="12" /></div>
    <!-- 文章主体 -->
    <div class="article-wrapper" @scroll="scrollMove" ref="wrapper" v-else>
      <!-- 头部：标题 时间 作者 -->
      <div class="header" ref="header">
        <h3 class="title">{{list.title}}</h3>
        <div class="time">
          <span>{{ list.pubdate }}</span>
          <span>|</span>
          <span>{{list.read_count}} 阅读</span>
          <span>|</span>
          <span>{{list.comm_count }} 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image round width="10vw" height="10vw" :src="list.aut_photo"/>
          <span class="name">{{ list.aut_name }}</span>

          <van-button
            v-if="list.is_followed"
            round
            size="small"
            @click="followAuthor()"
          >取消关注</van-button>
          <van-button
            v-else
            round
            size="small"
            color="#FC6627"
            @click="followAuthor()"
          >+ 关注</van-button>
        </div>
      </div>
      <!-- 内容：文章内容 -->
      <div class="main"  v-highlight>
        <div class="html" v-html="list.content">
          <!-- <p>{{ list.content }}</p> -->
        </div>
        <div class="space"></div>
      </div>
      <!-- 评论：评论组件 -->
    </div>
  </div>
</template>

<script>
import { getArticlesDetail } from '@/api/articles'
import { followAuthor } from '@/api/user'
export default {
  name: 'ArticleIndex',
  data () {
    return {
      list: {}, // 详情数据
      isShowName: false, // 作者信息是否隐藏
      isLoading: false // 是否开启数据加载中效果
    }
  },
  created () {
    this.getArticlesDetail()
  },
  methods: {
    // 获取详情
    async getArticlesDetail () {
      this.isLoading = true
      const res = await getArticlesDetail(this.$route.query.id)
      // console.log(res[1].data)
      this.list = res[1].data
      console.log(this.list)
      this.isLoading = false
    },
    // 监听滚动
    scrollMove () {
      const scrollTop = this.$refs.wrapper.scrollTop
      const headerHeight = this.$refs.header.offsetHeight
      this.isShowName = scrollTop > headerHeight // 获取wrapper的卷起高度 比较 header的高度，大于就显示头部导航的作者信息
    },
    // 关注或取关
    async followAuthor () {
      const Status = !this.list.is_followed
      const [err] = await followAuthor(this.list.aut_id, Status)
      if (err) return this.$toast.fail('操作失败,请先登录')
      this.$toast.success(Status ? '关注成功' : '取消关注')
      this.list.is_followed = Status
    }
  }
}
</script>

<style scoped lang="less">
.article-page {
  .article-skeleton {
    padding-top: 60px;
  }
  .article-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 44px 0 50px;
    // 头部
    .header {
      padding: 0 16px;
      .title {
        font-size: 20px;
        font-weight: normal;
        padding: 10px 0;
        margin: 0;
      }
      .time {
        font-size: 12px;
        color: #999;
        span:nth-child(2n) {
          margin: 0 5px;
          color: #ccc;
          position: relative;
          top: -1px;
        }
      }
      .author {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .name {
          flex: 1;
          padding-left: 10px;
          font-size: 16px;
        }
      }
    }
    // 内容
    .main {
      .space {
        height: 16px;
        background: @geek-gray-color;
      }
      .html {
        word-break: break-all;
        width: 100%;
        overflow: hidden;
        padding: 20px 16px;
        /deep/ img {
          max-width: 100%;
          background: #f9f9f9;
        }
        /deep/ pre {
          white-space: pre-wrap;
          code {
            white-space: pre;
          }
        }

      }
    }

  }
  /deep/ .van-nav-bar__title {
          max-width: 270px;
          width: 270px;
        }
        .nav-author {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > span {
            font-size: 14px;
            padding-left: 5px;
          }
          .line {
            color: #ccc;
            position: relative;
            top: -1px;
          }
          .follow {
            color: @geek-color;
             // 不加&  ->  .follow .un  ->  后代选择器
     // 加上&  ->  .follow.un   ->  交集选择器
      &.un {
        color: #999;
      }
          }
        }
}
</style>
